<template>
    <div class="students-pay">
        <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
            <el-step title="未审核"></el-step>
            <el-step title="已审核"></el-step>
            <el-step title="已缴费"></el-step>
            <el-step title="已排场"></el-step>
            <el-step title="已通过"></el-step>
        </el-steps>
        <div class="border-s detail-pay" v-if="JSON.stringify(info) != '{}'">
            <el-row>
                <el-col :span="6"><div class="grid-content bg-purple t-a-l">考试科目：{{info.subjects.chName}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light t-a-l">考试等级：{{info.subjectsLevel.name}}</div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple t-a-l">培新机构：{{info.organization.companyName}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple t-a-l">中文名：{{info.chName}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light t-a-l">英文名：{{info.enName}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple t-a-l">姓拼音：{{info.pinyinFamilyName}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple t-a-l">名拼音：{{info.pinyinName}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple t-a-l">GCP编号：{{info.gpcCode}} </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light t-a-l">GCP会员名：{{info.gpcName}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple t-a-l">是否是GCP会员：{{info.gpcUser == 1 ? '是' : '否'}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple t-a-l">GCP会员等级： {{info.vipLevel | vipLevel}}</div></el-col>
                <el-col :span="6" v-if="info.status > 3 && info.status < 7"><div class="grid-content bg-purple t-a-l">准考证号： {{info.examNumber}}</div></el-col>
                <el-col :span="6" v-if="info.status > 1 && info.status < 7"><div class="grid-content bg-purple t-a-l">缴费金额： {{info.paid}}</div></el-col>
                <el-col :span="6" v-if="info.status > 1 && info.status < 7"><div class="grid-content bg-purple t-a-l">优惠金额： {{info.discounts}}</div></el-col>
                <el-col :span="6" v-if="info.status > 3 && info.status < 7"><div class="grid-content bg-purple t-a-l">考场号： {{info.examinationRoom != null ? info.examinationRoom.name : ''}}</div></el-col>
                <el-col :span="6" v-if="info.status > 3 && info.status < 7"><div class="grid-content bg-purple t-a-l">考场地址： {{info.examinationRoom != null ? info.examinationRoom.address : ''}}</div></el-col>
                <el-col :span="6" v-if="info.status > 3 && info.status < 7"><div class="grid-content bg-purple t-a-l">座位号： {{info.seat}}</div></el-col>
                <el-col :span="6" v-if="info.status == 5 || info.status == 6"><div class="grid-content bg-purple t-a-l">考生分数： {{info.grade}}</div></el-col>
                <el-col :span="6" v-if="info.status == 7 || info.status == 8"><div class="grid-content bg-purple t-a-l grid-red">驳回理由： {{info.rejectReason}}</div></el-col>
            </el-row>
        </div>
        <el-button v-if="info.status == 2" class="go-pay" @click="goPay()">去支付</el-button>
    </div>
</template>
<script>
import apiHttp from '../../../api/index.js'
export default {
    data(){
        return{
            info:{},
            active:1
        }
    },
    filters:{
        vipLevel(val){
            if(val == 0){
                return '普通会员'
            }else if(val == 1){
                return '一年会员' 
            }else{
                return '终生会员'
            }
        }
    },
    mounted(){
        this.detail()
    },
    methods:{
        goPay(){
            let id = this.$route.query.id
            this.$router.push({
                path:'/students/pay',
                query:{
                    id:id
                }
            })
        },
        detail(){
            apiHttp.apiIndex.orderDetail(this.$route.query.id).then(resp=>{
                if(resp.code == 0){
                    this.info = resp.data
                    if(this.info.status == 0 || this.info.status == 1){
                        this.active = 1
                    }else if(this.info.status == 7 || this.info.status == 8){
                        this.active = -1
                    }else{
                        this.active = this.info.status
                    }
                }
            })
        }
    }
}
</script>

<style lang="less">
.students-pay{
    .el-steps--simple{
        background: #f8f7ee;
        height: 70px;
    }
    .el-step__head.is-success{
        color: #5d2805;
        border-color: #5d2805;
    }
    .el-step.is-simple .el-step__icon{
        width: 25px;
        height: 25px;
        font-size: 18px;
    }
    .el-step__title.is-success{
        color: #5d2805;
    }
    .el-step__head.is-wait{
        color: #999;
        border-color: #999;
    }
    .el-step__head.is-process{
        color: #999;
        border-color: #999;
    }
    .el-step__title.is-process{
        font-weight: 400;
        color: #999;
    }
    .students-pay .el-step__title.is-wait{
        color: #999;
    }
    .detail-pay{
        margin-top: 30px;
        padding: 20px 80px;
        .grid-content{
            line-height: 40px;
        }
    }
    .go-pay{
        margin-top: 30px;
        background-color: #5d2805;
        color: #fff;
        border-color: #5d2805;
        cursor: pointer;
        font-size: 16px;
    }
    .grid-red{
        color: red;
    }
}
</style>
